
const path = require("path");
const webpackDevServer = require("webpack-dev-server");
const webpack = require("webpack");
const config = require("../../config/env");
const wpcs = require("../../webpack/webpack.config.js");

module.exports = () => {
  // webpack 带回调方法 会直接启动webpack 再使用 webpackDevServer 会报错两次启动
  let compiler = webpack(wpcs);
  compiler.plugin('compile', () => {
    console.time("BundleTime")
  });

  compiler.plugin('done', () => {
    console.timeEnd("BundleTime")
  });
  // https://www.webpackjs.com/configuration/dev-server/
  let server = new webpackDevServer(compiler, {
    // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。
    contentBase: path.join(__dirname, "../../public/static"),
    // 此路径下的打包文件可在浏览器中访问
    publicPath: wpcs.output.publicPath,
    // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
    historyApiFallback: true,
    // 启用 webpack 的模块热替换特性
    hot: true,
    // // 启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
    quiet: false,
    // // 启用 noInfo 后，诸如「启动时和每次保存之后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
    noInfo: true,
    stats: {
      colors: true,
    },
  });
  server.listen(config.dev_hot_server_port);
}